const Path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin }  = require('clean-webpack-plugin');

module.exports={
  //开发模式
  mode:'production',  // development production
  //入口文件的配置项
  entry:{
    index:'./src/js/index.js',
    channel:'./src/js/channel.js'	
  },
  //出口文件的配置项
  output:{
    filename:'js/[name].js',
    path: Path.resolve(__dirname,'dist')
    //publicPath:'http://xxx.com'
  },
  //模块：例如解读CSS,图片如何转换，压缩
  module:{
    rules:[		
      {
        test: /\.(htm|html)$/i,
          use:'html-withimg-loader' 
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }	
        }
      },					
      {
        test: /\.css$/,
        //css-loader @import语法
        //use: [MiniCssExtractPlugin.loader,'css-loader']
        use: [
          {
            loader : MiniCssExtractPlugin.loader,
            options: {
              publicPath:'../'
            }
          },
          'css-loader'
        ]
      },
      {
        test:/\.(png|jpg|gif)/ ,
        use:[{
            loader:'url-loader',
            options:{
                limit:500,
                esModule: false,
                outputPath:'image/',
                //publicPath: process.env.type== 'dev' ? '../../image':'image/',
            }
        }]
      },
    ]
  },
  //插件，用于生产模版和各项功能
  plugins:[
    new HtmlWebpackPlugin({
      hash:true,
      template:'./src/index.html',
      filename:'index.html',
      chunks:['index'],
      minify:{    //配置html压缩
        removeAttributeQuotes:true,     //删除html中的双引号
        collapseWhitespace:true,    //html文件折叠成一行
      },      
    }),
    new HtmlWebpackPlugin({
      hash:true,
      template:'./src/channel.html',
      filename:'channel.html',
      chunks:['channel']
    }),
    
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
    }),
    new CleanWebpackPlugin()
  ],
  //配置webpack开发服务功能
  devServer:{
    contentBase:Path.resolve(__dirname,'dist/'), //设置基本目录结构
    host:'localhost', //服务器的IP地址，可以使用IP也可以使用localhost
    compress:true, //服务端压缩是否开启
    progress:true, 	//显示进度条
    port:8080 //配置服务端口号
  },
}